<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px" style="background-color: #001529; color: white; overflow: auto;">
        <div class="logo">
          <img src="./assets/img.png" alt="Logo" />
        </div>
        <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            style="border-right: 0;"
            :collapse="isCollapse"
        >
          <el-menu-item index="1" @click="navigateTo('Home')">
            <i class="el-icon-message"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-sub-menu index="2">
            <template #title>
              <i class="el-icon-menu"></i>
              <span>餐厅</span>
              <el-tooltip class="item" effect="dark" content="展开/收起" placement="right">
                <i class="el-icon-arrow-right"></i>
              </el-tooltip>
            </template>
            <el-menu-item index="2-1" @click="navigateTo('RestaurantList')">餐厅列表</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <i class="el-icon-setting"></i>
              <span>用户信息</span>
              <el-tooltip class="item" effect="dark" content="展开/收起" placement="right">
                <i class="el-icon-arrow-right"></i>
              </el-tooltip>
            </template>
            <el-menu-item index="3-1" @click="navigateTo('UserInfo')">用户信息</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container style="flex-grow: 1;">
        <el-header style="background-color: #409EFF; color: white; padding: 0; height: 60px; line-height: 60px; display: flex; justify-content: space-between; align-items: center; position: relative;">
          <div class="header-title">惊喜一餐</div>
          <div class="header-actions">
            <el-button type="text" @click="logout" style="color: white;">退出</el-button>
            <el-dropdown>
              <span class="el-dropdown-link">
                用户信息<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="navigateTo('UserInfo')">个人信息</el-dropdown-item>
                  <el-dropdown-item>设置</el-dropdown-item>
                  <el-dropdown-item divided @click="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <el-main style="padding: 20px; background-color: #f9fafc;">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { ElContainer, ElAside, ElHeader, ElMain, ElMenu, ElMenuItem, ElSubMenu, ElTooltip, ElButton, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
import { Message, Menu, Setting, ArrowRight, ArrowDown } from '@element-plus/icons-vue';

export default {
  components: {
    ElContainer,
    ElAside,
    ElHeader,
    ElMain,
    ElMenu,
    ElMenuItem,
    ElSubMenu,
    ElTooltip,
    ElButton,
    ElDropdown,
    ElDropdownMenu,
    ElDropdownItem,
    'el-icon-message': Message,
    'el-icon-menu': Menu,
    'el-icon-setting': Setting,
    'el-icon-arrow-right': ArrowRight,
    'el-icon-arrow-down': ArrowDown
  },
  data() {
    return {
      isCollapse: false,
    };
  },
  methods: {
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    logout() {
      // 处理退出逻辑
      console.log('退出');
    },
    navigateTo(routeName) {
      this.$router.push({ name: routeName });
    }
  },
};
</script>

<style>
.common-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f0f0f0;
}

.logo {
  text-align: center;
  padding: 10px;
  height: 80px; /* Adjust the height to be at least as tall as the image */
  background-color: #409EFF; /* Match the header background color */
  position: relative; /* Add positioning context for the image */
}

.logo img {
  position: absolute; /* Position the image over the background */
  top: 0; /* Align the top of the image with the top of the container */
  left: 50%; /* Center the image horizontally */
  transform: translateX(-50%); /* Offset the image by half its width to center it */
  width: auto; /* Use auto to maintain the aspect ratio */
  height: 100%; /* Make the image height fill the container */
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}

.el-menu .el-menu-item {
  color: #bfcbd9;
}

.el-menu .el-menu-item:hover {
  background-color: #46a0fc;
}

.el-menu .el-submenu__title:hover {
  background-color: #46a0fc;
}

.header-title {
  font-size: 20px;
  font-weight: bold;
  margin-left: 20px;
}

.header-actions {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.el-dropdown-link {
  color: white;
  cursor: pointer;
  margin-left: 10px;
}

.el-dropdown-link i {
  margin-left: 5px;
}

/* 自定义滚动条样式 */
.el-aside::-webkit-scrollbar {
  width: 8px; /* 纵向滚动条的宽度 */
  height: 8px; /* 横向滚动条的高度 */
}

.el-aside::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5); /* 滚动条的背景色 */
  border-radius: 4px; /* 滚动条的圆角 */
}

.el-aside::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.1); /* 滚动条轨道的背景色 */
}
</style>